<template>
	<view class="container" style="background-color: #ffffff;">
		<view class="add-member" @click="addMember"><button class="add-btn">添加会员</button></view>
		<view class="typeChoice">
			<view class="search-block">
				<input type="text" value="" placeholder="点击输入手机号(支持模糊查询)" placeholder-class="placeclass"
					v-model="mobile" class="search-text" maxlength="11" focus />
				<view class="search-ico-wapper1" @click="queryMember()">
			  <image src="../../static/search.png" class="search-ico-1" mode=""></image>
				</view>
			</view>
			<view>
				<view class="typeList" style="padding-top: 30rpx;" v-for="(item, index) in members" :key="index">
					<view class="typeImg">
						<!--
						 雀欢乐
						 <image src="/static/quehuanle.png" mode=""></image>
						-->
						<!--友智 -->
						<image src="/static/icon.png" mode=""></image>
					</view>
					<view class="typeDetail">
						<view class="typeCost">
							<text class="costNum">手机号码：{{item.phone}}</text>
						</view>
						<view class="typeCost">
							<text class="costNum">账户余额：{{item.integral}}元</text>
						</view>
						<view class="typeCost" @click="sendCert(index,item)">
							<text class="costNum" style="color:#62b074 ;">赠送卡券</text>
							<text class="iconfont icon-more" style="font-size: 28rpx;color:#62b074"></text>
						</view>
						<view class="typeCost" @click="shareToggle(index,item)">
							<text class="costNum" style="color:#62b074 ;">点击查看详情</text>
							<text class="iconfont icon-more" style="font-size: 28rpx;color:#62b074"></text>
						</view>
					</view>
					<view class="updateintegral">
						<view class="updateinput">
							<input type="text" v-model="item.integral" value=""
								placeholder-style="color: #62b074;font-size:22rpx;letter-spacing:1rpx;margin-left:10rpx"
								placeholder="请输入目标余额" />
						</view>
						<view class="updatebtn" @click.stop="tishi(item.memberId,item.nickname,item.integral)">
							<text>调整余额</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	import '@/static/icon/iconfont.css';
	export default {
		data() {
			return {
				storeId: null,
				members: [],
				member: null,
				integral: 0,
				memberId: null,
				mobile: '',
				bottomData: [{
						text: '现金订单',
						icon: '/static/pay.png',
						name: '0'
					},
					{
						text: '积分记录',
						icon: '/static/integral.png',
						name: '1'
					},

				],
				currentPage: 1,
				yue: 0
			};
		},
		async onLoad(options) {
			this.storeId = options.storeId;
			this.getMembers(options.storeId);
			this.updatetishi();
		},
		async onShow() {
			let that = this;
			//this.getMembers(that.storeId);
		},

		onReachBottom() {
			this.currentPage = this.currentPage + 1
			this.getMembers(this.storeId)
		},
		methods: {
			updatetishi(){
				uni.showModal({
					title: '更新公告',
					content: '修改会员余额时无需再填写积分,系统后台将自动换算成积分,请在修改积分时直接按实际金额修改。客户使用小程序时显示的积分暂时仍是你填写的余额的100倍,我司将在下一次小程序版本更新中取代掉积分概念,使用1:1的余额',
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			async select(item, index) {
				console.log(this.member)
				if (item.name == '0') {
					uni.navigateTo({
						url: '/pages/order/memberorder?memberId=' + this.member.id + '&storeId=' + this.storeId
					})
				} else {
					uni.navigateTo({
						url: '/pages/user/integralDetail?memberId=' + this.member.id + '&storeId=' + this
							.storeId
					})
				}
				this.$refs.popup.close('bottom');
			},
			async getMembers(storeId) {
				let pageSize = 30;
				let pageIndex = pageSize * (this.currentPage - 1);
				console.log('pageIndex:' + pageIndex)
				let params = {
					storeId: storeId,
					pageIndex: pageIndex,
					pageSize: pageSize,
					mobile: this.mobile
				}
				let data = await Api.apiCall('post', Api.qsg.memberstore, params);
				if (data) {
					// this.members = [];
					data.forEach(item => {
						item.integral = item.integral/100;
						this.members.push(item);
					});
				}
			},
			shareToggle(index, member) {
				this.member = member
				console.log('ssss')
				console.log(member)
				uni.navigateTo({
					url: '/pages/member/memberdetail?memberId=' + member.memberId + '&storeId=' + this.storeId
				})
			},
			sendCert(index, member) {
				this.member = member
				uni.navigateTo({
					url: '/pages/cert/send?memberId=' + member.memberId + '&storeId=' + this.storeId
				})
			},
			async queryMember() {
				if (this.mobile == '') {
					this.members = [];
					this.getMembers(this.storeId)
				} else {
					let data = await Api.apiCall('post', Api.qsg.memberstore, {
						storeId: this.storeId,
						phone: this.mobile,
						pageIndex: 0,
						pageSize: 10
					});
					if (data) {
						data.forEach(item => {
							item.integral = item.integral / 100
						});
						console.log(data)
						this.members = data
					}
				}
			},
			tishi(id, name, integral) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '新版本比例为1:1,无需再换算为积分填写,确定将该用户的余额调整为' + integral + '元吗',
					success: function(res) {
						if (res.confirm) {
							that.addJifen(id, name, integral)
						} else if (res.cancel) {

						}
					}
				});
			},
			async addJifen(id, name, integral) {
				let params = {
					storeId: this.storeId,
					memberId: id,
					integral: integral * 100
				}
				let data = await Api.apiCall('post', Api.qsg.addJifen, params);
				if (data) {
					this.isShow = false;
					this.queryMember()
					uni.showToast({
						title: '修改成功'
					})
				}
			},
			addMember(){
				let that = this;
				uni.navigateTo({
					url:'/pages/member/addmember?storeId=' + that.storeId
				})
			}
		}
	};
</script>
<style lang="scss">
	.tagList {
		overflow: hidden;
		height: 40rpx;
	}

	.updateinput {
		height: 55rpx;
		width: 170rpx;
		border-color: #62b074;
		color: #62b074;
		border-radius: 10rpx;
		box-shadow: 0 0 10px #62b074;
		padding: 5rpx;
		text-align: center;
	}

	.updatebtn {
		width: 170rpx;
		height: 55rpx;
		line-height: 55rpx;
		background-color: #62b074;
		color: #ffffff;
		border-radius: 10rpx;
		text-align: center;
		letter-spacing: 3rpx;
		margin-top: 12rpx;
	}

	.xun-title {
		font-size: 38upx;
		font-weight: bold;
		line-height: 1;
		margin-top: 30rpx;
	}

	.carousel-section {
		position: relative;
		padding-top: 10px;
	}

	.carousel {
		width: 100%;
		height: 350upx;

		.carousel-item {
			width: 100%;
			height: 100%;
			// padding: 0 28upx;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
			// border-radius: 10upx;
		}
	}

	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}

	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		padding: 30upx 30upx;
		background: #fff;

		.cate-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: 20rpx;
			margin-left: 10rpx;
			width: 23%;
		}

		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 100upx;
			height: 100upx;
			border-radius: 50%;
			// box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
		}

		.cate-text {
			text-align: center;
			// margin-top: 20upx;
			// margin-bottom: 28upx;
			// line-height: 1;
		}

	}

	.cate-item:nth-child(n+4) .cate-text {
		margin: 0;
	}

	.f-header {
		display: flex;
		align-items: center;
		height: 100upx;
		padding: 0upx 30upx;
		background: #fff;

		image {
			flex-shrink: 0;
			width: 40upx;
			height: 40upx;
			margin-right: 20upx;
		}

		.tit-box {
			flex: 1;
			display: flex;
			flex-direction: column;
		}

		.tit {
			font-size: 28upx;
			color: #font-color-dark;
			line-height: 28upx;
		}

		.tit2 {
			font-size: $font-sm;
			color: $font-color-light;
		}

		.icon-you {
			font-size: $font-lg + 2upx;
			color: $font-color-light;
		}
	}

	.video-tit {
		width: 440rpx;
		height: 46rpx;
		font-size: 30rpx;
		color: #333333;
		line-height: 1;

	}

	.updateintegral {
		width: 180rpx;
		height: 120rpx;
		display: flex;
		flex-direction: column;
		margin-left: 40rpx;
	}

	.video-reader {
		width: 440rpx;
		height: 90rpx;
		font-size: 24rpx;
		color: #666;
		line-height: 36rpx;
		box-sizing: border-box;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.costNum {
		font-size: 28rpx;
		color: #585858;
	}

	.video-num {
		width: 440rpx;
		height: 24rpx;
		font-size: 24rpx;
		color: #e61a0f;
		line-height: 1;
	}

	.video-describe {
		width: 440rpx;
		height: 160rpx;
		margin: 30rpx 0;
		display: inline-block;
		vertical-align: top;
	}

	.video-cover {
		width: 220rpx;
		height: 160rpx;
		margin: 30rpx 30rpx 30rpx 0;
		display: inline-block;
		vertical-align: top;
	}

	.video-cover image {
		width: 220rpx;
		height: 160rpx;
		background: #000000;
	}

	.video-content {
		width: 690rpx;
		height: 220rpx;
		border-bottom: 1rpx solid #e6e6e6;
	}

	.video-content:last-child {
		border: none;
	}

	.video-list {
		width: 690rpx;
		height: auto;
	}

	.health-video {
		width: 750rpx;
		height: auto;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.typeCost {
		height: 80rpx;
		line-height: 40rpx;
	}

	.typeTagMain {
		display: inline-block;
		vertical-align: top;
		padding: 0 20rpx;
		box-sizing: border-box;
		height: 40rpx;
		line-height: 40rpx;
		background: #edf0fc;
		font-size: 20rpx;
		color: #172a89;
		margin-right: 14rpx;
		border: none;
	}

	.typeTag {
		display: inline-block;
		vertical-align: top;
		padding: 0 20rpx;
		box-sizing: border-box;
		height: 40rpx;
		line-height: 40rpx;
		background: #f5f5fa;
		font-size: 20rpx;
		color: #575759;
		margin-right: 14rpx;
		border: none;
	}

	.typeTitle {
		font-size: 32rpx;
		font-weight: 600;
		line-height: 50rpx;
	}

	.typeDetail {
		width: 310rpx;
		height: 120rpx;
		display: flex;
		flex-direction: column;
	}

	.typeImg {
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
	}

	.typeImg image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 12rpx;
		box-shadow: 0 0 6px #62b074;
	}

	.typeList {
		display: flex;
		padding: 50rpx 0;
		box-sizing: border-box;
		border-bottom: 1px solid #f7f6ff;
	}

	.typeList:first-child {
		padding-top: 0;
	}

	.typeChoice {
		width: 750rpx;
		height: auto;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.typeName {
		font-weight: 600;
		line-height: 120rpx;
		font-size: 38rpx;
		color: black;
	}

	.bottom-content-item-column {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.unipopup {
		height: 300rpx;
		width: 480rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 24rpx;
	}

	.btn-primary {
		background-color: #ff9662;
		text-align: center;
		border-radius: 15rpx;
		color: #FFFFFF;
		width: 50%;
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 30rpx;
	}

	.btn-default {
		/* background-color: #ff9662; */
		border: 1rpx solid #ff9662;
		text-align: center;
		border-radius: 15rpx;
		color: #ff9662;
		width: 50%;
		height: 100rpx;
		line-height: 100rpx;
		margin-bottom: 30rpx;
	}

	.item-no-select {
		background-color: #ff9662;
	}

	.uni-popup-share {
		background-color: #fff;
	}

	.uni-share-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 40px;
	}

	.uni-share-title-text {
		font-size: 14px;
		color: #666;
	}

	.uni-share-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding-top: 10px;
	}

	.uni-share-content-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		width: 360px;
	}

	.uni-share-content-item {
		width: 90px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		padding: 10px 0;
		align-items: center;
	}

	.uni-share-content-item:active {
		background-color: #f5f5f5;
	}

	.uni-share-image {
		width: 30px;
		height: 30px;
	}

	.uni-share-text {
		margin-top: 10px;
		font-size: 14px;
		color: #3B4144;
	}

	.uni-share-button-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 10px 15px;
	}

	.uni-share-button {
		flex: 1;
		border-radius: 50px;
		color: #666;
		font-size: 16px;
	}

	.uni-share-button::after {
		border-radius: 50px;
	}

	.coachArray {

		white-space: nowrap;
		overflow-x: scroll;
		overflow-y: hidden
	}

	.coachEvaluate {
		font-size: 26rpx;
		color: #666;
	}

	.coachDetail {
		font-size: 26rpx;
		height: 46rpx;
		line-height: 46rpx;
		color: #666;
	}

	.coachName {
		font-size: 34rpx;
		height: 66rpx;
		line-height: 66rpx;
		font-weight: 600;
		color: black;
	}

	.teamList image {
		width: 106rpx;
		height: 106rpx;
		border-radius: 50%;
		display: block;
		margin: 0 auto;
	}

	.teamList {
		display: inline-block;
		vertical-align: middle;
		width: 250rpx;
		padding: 30rpx 0 40rpx 0;
		border-radius: 12rpx;
		box-shadow: 0 0 20rpx 0rpx #edebff;
		text-align: center;
		margin: 10rpx 30rpx 50rpx 0;
	}

	.teamList:first-child {
		margin-left: 30rpx;
	}

	.coachTypeName {
		height: 120rpx;
		line-height: 120rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
	}

	.coachTypeName text:first-child {
		font-size: 38rpx;
		font-weight: 600;
		color: black;
		line-height: 120rpx;
		text-align: left;
		flex: 1;
	}

	.coachTypeName text:last-child {
		font-size: 26rpx;
		color: #999;
		line-height: 120rpx;
		text-align: right;
		flex: 1;
	}

	.coachTeam {
		width: 750rpx;
		height: auto;
	}

	.lookOverMore {
		text-align: center;
		line-height: 100rpx;
		font-size: 28rpx;
		color: #111;
	}

	/* 搜索框 */
	.search-ico-1 {
		width: 40upx;
		height: 40upx;
		float: right;
	}

	.search-text {
		font-size: 14px;
		background-color: #FFFFFF;
		height: 60upx;
		width: 630upx;
	}

	.placeclass {
		color: #62b074;
	}

	.search-block {
		display: flex;
		flex-direction: row;
		padding-left: 60upx;
		position: relative;
		top: 30upx;
		-moz-box-shadow: 0 0 10px #62b074;
		-webkit-box-shadow: 0 0 10px #62b074;
		box-shadow: 0 0 10px #62b074;
		border-radius: 18rpx;
		margin-bottom: 30rpx;
		text-align: center;
	}

	.search-ico-wapper {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0upx 0upx 0upx 40upx;
		border-bottom-left-radius: 18px;
		border-top-left-radius: 18px;
	}

	.search-ico-wapper1 {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0upx 40upx 0upx 0upx;
		border-bottom-right-radius: 18px;
		border-top-right-radius: 18px;
	}

	.shadow {
		width: 638upx;
		height: 60upx;
		border-radius: 18px;
		-moz-box-shadow: 0 0 10px #e6e6e6;
		-webkit-box-shadow: 0 0 10px #e6e6e6;
		box-shadow: 0 0 10px #e6e6e6;
		position: relative;
		top: -90upx;
		left: 60upx;
	}
	
	.add-member{
		margin-top: 10rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		
		.add-btn{
			color: #FFFFFF;
			background-color: #62b074;
		}
	}
</style>
